<template>
    <div>
      <div class="permissManaTool">
        <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
          <template slot="prepend">ROLE_</template>
        </el-input>
        <el-input size="small" v-model="role.nameZh" placeholder="请输入角色中文名"
        @keydown.enter.native="doAddRole"
        ></el-input>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="doAddRole">添加角色</el-button>
      </div>
      <div class="permissManaMain">
        <el-collapse v-model="activeName"  accordion @change="change">
          <el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>可访问资源</span>
                <el-button style="float: right; padding: 3px 0;color: #ff0000" type="text"
                           icon="el-icon-delete"
                           @click="doDeleteRole(r)"
                ></el-button>
              </div>
              <div>
                <el-tree :data="allMenus"
                         :props="defaultProps"
                         ref="tree"
                         key="index"
                         show-checkbox
                         node-key="id"
                         :default-checked-keys="selectedMenus"
                ></el-tree>
                <div style="justify-content: flex-end;display: flex">
                  <el-button type="danger" size="mini" @click="cancelUpdate">取消修改</el-button>
                  <el-button type="primary" size="mini" @click="doUpdate(r.id,index)">确定修改</el-button>
                </div>
              </div>
            </el-card>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
</template>

<script>
export default {
  name: "PermitMana",
  data(){
    return {
      role:{
        name:"",
        nameZh:""
      },
      roles:[],
      allMenus:[],
      defaultProps:{
        children: 'children',
        label: 'name'
      },
      selectedMenus:[],
      activeName:-1
    }
  },
  mounted() {
    this.initRoles();
  },
  methods:{
    //删除角色
    doDeleteRole(role){
      this.$confirm('此操作将永久删除['+role.nameZh+']角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         this.$deleteRequest("/system/basic/permiss/role/"+role.id).then(resp=>{
          if(resp){
            this.initRoles();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //添加角色
    doAddRole(){
      if(this.role.name && this.role.nameZh){
        this.$postRequest("/system/basic/permiss/role",this.role).then(resp=>{
          if(resp){
            this.initRoles();
            this.role.name = "";
            this.role.nameZh = "";
          }
        })
      }else{
        this.$message.error("所有字段不能为空！")
      }
    },
    //取消
    cancelUpdate(){
      this.activeName = -1;
    },
    //配置菜单
    doUpdate: function (roleId, index) {
      let tree = this.$refs.tree[index];
      let selectedKeys = tree.getCheckedKeys(true);//获取选中的子接点
      let url = "/system/basic/permiss/?rid=" + roleId + "&mids=" + selectedKeys;
      this.$putRequest(url).then(resp=>{
        if(resp){
          this.activeName = -1;
        }
      })
    },
    //初始化角色对应的菜单
    initSelectedMenus(roleId){
      this.$getRequest("/system/basic/permiss/mid/" + roleId).then(resp=>{
        if(resp){
          this.selectedMenus = resp;
        }
      })
    },
    //点击角色获取菜单数据
    change(roleId){
      if(roleId){
          this.initAllMenus();
          this.initSelectedMenus(roleId);
      }
    },
    //初始化所有菜单
    initAllMenus(){
      this.$getRequest("/system/basic/permiss/menus").then(resp=>{
        if(resp){
          this.allMenus = resp;
        }
      })
    },
    initRoles(){
      this.$getRequest("/system/basic/permiss/").then(resp=>{
        if(resp){
            this.roles = resp;
           // console.log(JSON.stringify(this.roles))
        }
      })
    }
  }
}
</script>

<style scoped>
.permissManaTool{
    display: flex;
    justify-content: flex-start;
}
.permissManaTool .el-input{
    width: 300px;
  margin-right: 6px;
}
.permissManaMain{
  margin-top: 10px;
  width: 700px;
}
</style>